<template>
  <div class="home-content">
    <SearchBar :placeholder="searchPlaceholder" />
    
    <div class="carousel-wrapper">
      <Carousel :items="carouselItems" @item-click="onCarouselItemClick" />
    </div>
    
    <ToolBox :tools="tools" @tool-click="onToolClick" />
    
    <div class="recommend-section">
      <div class="section-header">
        <span class="section-title">推荐阅读</span>
        <span class="section-more" @click="goToBlog">查看更多</span>
      </div>
      
      <div class="blog-list">
        <BlogItem 
          v-for="(blog, index) in recommendBlogs" 
          :key="index" 
          :data="blog" 
          @click="goToBlogDetail(blog.id)" 
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import SearchBar from '../common/SearchBar.vue'
import Carousel from '../common/Carousel.vue'
import ToolBox from './ToolBox.vue'
import BlogItem from '../blog/BlogItem.vue'

const router = useRouter()

// 搜索框占位符
const searchPlaceholder = ref('搜索感兴趣的内容')

// 轮播图数据
const carouselItems = ref([
  {
    id: '1',
    title: '探索AI的无限可能',
    image: 'https://picsum.photos/id/1/600/300',
    link: '/blog/1'
  },
  {
    id: '2',
    title: '2023年最受欢迎的编程语言',
    image: 'https://picsum.photos/id/2/600/300',
    link: '/blog/2'
  },
  {
    id: '3',
    title: '移动应用开发最佳实践',
    image: 'https://picsum.photos/id/3/600/300',
    link: '/blog/3'
  }
])

// 工具箱数据
const tools = ref([
  { id: 'ai', name: 'AI模型', icon: 'cluster-o', route: '/ai-chat' },
  { id: 'compiler', name: '在线编译', icon: 'code-o', route: '/compiler' },
  { id: 'exercise', name: '练习题库', icon: 'notes-o', route: '/exercise' }, // 新增
  { id: 'article', name: '创作文章', icon: 'edit', route: '/article/create' },
  { id: 'history', name: '浏览历史', icon: 'clock-o', route: '/profile/history' },
  { id: 'scan', name: '扫一扫', icon: 'scan', route: '/scan' }
])

// 推荐博客数据
const recommendBlogs = ref([
  {
    id: '1',
    title: 'Vue 3 组合式API完全指南',
    summary: '本文详细介绍了Vue 3的组合式API的使用方法和最佳实践，帮助你更好地理解和应用这一强大特性。',
    author: {
      id: 'user1',
      name: '张三',
      avatar: 'https://picsum.photos/id/1001/100/100'
    },
    views: 1200,
    likes: 345,
    createTime: '2023-05-15',
    cover: 'https://picsum.photos/id/11/200/120'
  },
  {
    id: '2',
    title: '移动端适配方案全解析',
    summary: '从viewport到rem、vw，再到最新的响应式设计方案，本文全面解析移动端适配的各种技术和方法。',
    author: {
      id: 'user2',
      name: '李四',
      avatar: 'https://picsum.photos/id/1002/100/100'
    },
    views: 980,
    likes: 230,
    createTime: '2023-05-10',
    cover: 'https://picsum.photos/id/12/200/120'
  },
  {
    id: '3',
    title: '前端性能优化实战指南',
    summary: '从网络请求、渲染性能到用户体验，本文提供了一系列前端性能优化的实用技巧和方法。',
    author: {
      id: 'user3',
      name: '王五',
      avatar: 'https://picsum.photos/id/1003/100/100'
    },
    views: 1500,
    likes: 420,
    createTime: '2023-05-05',
    cover: 'https://picsum.photos/id/13/200/120'
  }
])

// 轮播图点击事件
const onCarouselItemClick = (item) => {
  if (item.link) {
    router.push(item.link)
  }
}

// 工具点击事件
const onToolClick = (tool) => {
  console.log('工具点击:', tool)
}

// 跳转到博客页面
const goToBlog = () => {
  router.push('/blog')
}

// 跳转到博客详情页
const goToBlogDetail = (id) => {
  router.push(`/blog/${id}`)
}
</script>

<style lang="scss" scoped>
.home-content {
  padding: 0 0 calc(20px + var(--tabbar-height));
  
  .carousel-wrapper {
    padding: 0 12px;
    margin-top: 12px;
  }
  
  .recommend-section {
    margin-top: 20px;
    padding: 0 12px;
    
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      
      .section-title {
        font-size: 16px;
        font-weight: 500;
        color: var(--text-color);
      }
      
      .section-more {
        font-size: 12px;
        color: var(--primary-color);
      }
    }
    
    .blog-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
  }
}
</style>